// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible'
import ElementUI from 'element-ui';
import Vuex from 'vuex'
import store from "../store/index"
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css'
require('../mock/mock.js');
Vue.use(ElementUI)

Vue.config.productionTip = false
/*
  每个守卫方法接收三个参数：
        to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由
        next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

        在前端路由跳转中，路由跳转前都是会经过beforeEach，而beforeEach可以通过next来控制到底去哪个路由。根据这个特性我们就可以在beforeEach中设置一些条件来控制路由的重定向。常见的使用场景有：1、验证用户是否登录（若未登录，且当前非登录页面，则自动重定向登录页面）；2、用户权限；3、用户输入的路路径是否存在，不存在的情况下如何处理，重定向到哪个页面。此处呢我使用一个简单的例子：当用户输入的路径不存在的情况下，将其重定向到‘/’路径来说明beforeEach是如何控制路由的。话不多说，直接看下边如何实现的（这里我以创建一个名为router-be的项目为例）。
 */
 //perfence 性能监控 加载时间 audits 优化建议 需要连接谷歌浏览器所以卡死 security https查看 memory js内存使用
//beforeEach vuex 路由守卫
router.beforeEach((to, from, next) => {
  /*
  .主要说明下为什么要使用遍历to.matched数组判断meta的requiresAuth字段，而不直接使用to.meta.requiresAuth来判断，首先例子当中给的是cinema,也即是1级路由设置了requiresAuth.而cinemaPlan没有设置。假设两种情况：

　前提：vue路由匹配时会同时匹配满足情况的所有路由，即如果路由是‘/cinema/plan’的话，‘/cinema’也会触发。另外如果较高等级的路由需要登录控制的话，它所有的嵌套路由都是基本需要登录控制的。

（1）cinema具有登录控制，而cinemaPlan 没有。如果用户正常点击路由跳转的话，它必然是先进一级路由，再去二级路由，一级路由实现登录控制，利用to.meta是能够满足的，注意这里是用户正常点击，但是假如有用户直接改变url地址的话去访问cinemaPlan的话，则需要给cinemaPlan路由添加requiresAuth字段，同理也需要给cinemaDetail添加字段，如果路由比较多的话，就会很麻烦。

（2）cinema没有登录控制，而cinemaPlan有。这种情况确实不怕用户直接改变url访问二级路由了，但是同样如果过多二级路由，也是需要设置许多requiresAuth。

   所以，为了方便，直接遍历to.matched数组，该数组中保存着匹配到的所有路由信息。就该例而言，访问cinema时，matched数组长度为1，访问cinemaPlan时，matched数组长度为2，即保存着‘/cinema’以及‘/cinema/plan’。其实啰嗦了这么多，直接使用to.meta判断字段也可以，就是需要给所有需要控制的路由添加requiresAuth。而to.matched则只需要给较高一级的路由添加requiresAuth即可，其下的所有子路由不必添加。
   */
  /* ES6 语法some方法 这里的意思是，to.matched 的数组，如果在mata中有requiresAuth 那么就返回true*/
  //alert(to.path);
  if (to.matched.some(record => record.meta.requireAuth)) {//是否需要登录
    // console.log(typeof localStorage.localLogin, JSON.parse(localStorage.localLogin))
   // alert(JSON.parse(localStorage.localLogin));
  //如果本地存储有 就放过 localStorage 谷歌浏览器application中查看
    //if (typeof JSON.parse(localStorage.localLogin) === 'object') {
      if (localStorage.localLogin === 'true') {

      store.state.userInfo = JSON.parse(localStorage.localLogin)
      store.state.isLogin = true
      // next()
      // console.log('next 之后')
    }
    if (store.state.isLogin === true) {
      // console.log("next 之前")
      next()
      // console.log("next 之后")
    } else {
      next({path: '/login'})
    }
  } else {
    next();
  }
})
// 创建一个ElementUI.Loading.service()返回的loading对象；
var loadinginstace
// 全局的拦截器
axios.interceptors.request.use((config) => {
  // 调用ElementUI.Loading,通过service（）设置属性，
  loadinginstace = ElementUI.Loading.service({fullscreen: true, text: '拼命加载中...', background: 'rgba(0, 0, 0, 0.8)'})
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use((response) => {
  // 取消加载效果
  loadinginstace.close()
  return response
}, function (error) {
  // 对响应错误做点什么
  loadinginstace.close()
  return Promise.reject(error)
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store: store,
})
Vue.filter('getYMD', function(input) {
  return input.split(' ')[0];
})
